import { defineConfig, presetAttributify, presetUno } from "unocss";
import presetRemToPx from "@unocss/preset-rem-to-px";
import transformerDirectives from "@unocss/transformer-directives";
import type { Theme } from "unocss/preset-uno";
import presetTheme from "unocss-preset-theme";
import { appTheme, safelist } from "./src/theme.ts";

export default defineConfig({
  // 预设
  presets: [
    presetUno(),
    presetAttributify(),
    presetRemToPx({
      baseFontSize: 4,
    }),
    presetTheme<Theme>({
      theme: appTheme,
    }),
  ],
  // 快捷方式, 将多个规则组合成单个简写
  shortcuts: [
    { center: "flex justify-center items-center" },
    // {
    //   content:
    //     "",
    // },
    {
      btn: "py-2 px-4 font-semibold rounded-lg shadow-md cursor-pointer",
    },
    // 动态快捷方式
    [
      /^btn-(.*)$/,
      ([, c]) =>
        `bg-${c} text-#fff hover:bg-${c}/80 py-2 px-4 font-semibold rounded-lg shadow-md cursor-pointer`,
    ],
    // 使用主题
    [
      /^appbd-(.*)$/,
      ([, c], { theme }) => {
        return `b-1 b-${c} b-dashed`;
      },
    ],
  ],
  // 自定义规则
  rules: [
    // 注意：属性语法遵循 CSS 属性语法，例如 font-weight 而不是 fontWeight。如果属性名中有连字符 -，应该用引号括起来。
    [/^font-weight-(\d+)$/, ([, d]) => ({ "font-weight": d })],
    [
      "disable-select-text",
      {
        "user-select": "none",
        "-moz-user-select": "none",
        "-ms-user-select": "none",
        "-khtml-user-select": "none",
      },
    ],
    [/^bd-(\d+)$/, ([, d]) => ({ border: `${d}px solid #ddd` })],
    [/^p-(\d+)$/, (match) => ({ padding: `${match[1]}px` })],
    [
      /^col-gap-(\d+)$/,
      ([, arg1]) => {
        return { "column-gap": `${parseFloat(arg1)}px` };
      },
    ],
    [
      /^row-gap-(\d+)$/,
      ([, arg1]) => {
        return { "row-gap": `${parseFloat(arg1)}px` };
      },
    ],
    [
      /^f-w-(\d+)$/,
      ([, arg1]) => {
        return { "font-weight": arg1 };
      },
    ],
    [
      /^br-(\d+)$/,
      ([, arg1]) => {
        return { "border-radius": `${parseFloat(arg1)}px` };
      },
    ],
    [
      /^br:(.*):(.*):(.*):(.*)$/,
      (match) => {
        return {
          "border-radius": `${parseFloat(match[1])}px ${parseFloat(
            match[2]
          )}px ${parseFloat(match[3])}px ${parseFloat(match[4])}px`,
        };
      },
    ],
    [
      /^p-tb-(\d+)$/,
      ([, arg1]) => {
        return { padding: `${parseFloat(arg1)}px 0` };
      },
    ],
    [
      /^b-b:(.*):(.*)$/,
      (match) => {
        return {
          "border-bottom": `${parseFloat(match[1])}px solid ${match[2]}`,
        };
      },
    ],
    [
      /^text-ellipsis-(\d+)$/,
      (match) => {
        return {
          display: "-webkit-box",
          overflow: "hidden",
          "text-overflow": "ellipsis",
          "word-break": "break-all",
          "-webkit-line-clamp": match[1],
          "-webkit-box-orient": "vertical",
        };
      },
    ],
    [
      /^font-weight-(\d+)|(lighter|bolder|normal|bold)(?:\[(lighter|bolder|normal|bold)\])?$/,
      ([, d, weight1, weight2]) => ({ "font-weight": d || weight1 || weight2 }),
    ],
    [
      /^pre-wrap-break$/,
      () => ({
        "white-space": "pre-wrap",
        "word-wrap": "break-word",
        "word-break": "break-all",
      }),
    ],
  ],
  // 转换器
  transformers: [transformerDirectives()],
  // 白名单safelist
  safelist: safelist(), // 可以根据项目需要添加
});

/*import presetWeapp from "unocss-preset-weapp";
import {
  extractorAttributify,
  transformerClass,
} from "unocss-preset-weapp/transformer";
import rules from "./unocss.config/rules.js"; // 导入自定义规则
import shortcuts from "./unocss.config/shortcuts.js";
import { transformPxToRpx } from "./src/utils/index";
import {
  uniWidth,
  designWidth,
  deviceRatio,
} from "./src/utils/common/app.config.ts";
const { presetWeappAttributify, transformerAttributify } =
  extractorAttributify();

function generatePixelValues(start = 0, end = 200): { [key: number]: string } {
  const pixelValues: { [key: number]: string } = {};
  for (let i = start; i <= end; i++) {
    pixelValues[i] = transformPxToRpx(`${i}px`);
  }
  return pixelValues;
}
export default {
  rules: rules,
  presets: [
    presetWeapp({
      platform: "uniapp",
      whRpx: true,
      // isH5: true,
      designWidth: designWidth,
      deviceRatio: {
        [uniWidth]: uniWidth / designWidth,
        [designWidth]: deviceRatio,
      },
    }),
    presetWeappAttributify(),
  ],
  shortcuts: shortcuts,
  transformers: [transformerAttributify(), transformerClass()],
  theme: {
    // fontFamily: {},
    // colors: {},
    spacing: generatePixelValues(),
    // borderRadius: {},
  },
  // variants: {
  //   extend: {},
  // },
};*/
